import React from "react";

// 演示 context 的变化

// 多个consumer 的变化

// 1.先创建
const TheContext = React.createContext('drack')
const ColorContext = React.createContext('red')
// 2.包裹
class App extends React.Component{
    constructor(){
        super()
        
        this.state={
            cont:0
        }
    }
    handonclick = ()=>
    {
        this.setState({
            cont:this.state.cont+1
        })
    }
    render(){
        return(
            // 生产者
            <TheContext.Provider value={this.state.cont}>
                <ColorContext.Provider value='red' >
                 <button onClick={this.handonclick}>点我+1</button>
                <Toolbar/>
                </ColorContext.Provider>
              
            </TheContext.Provider>
        )
    }
}
// function Toolbar(props){
//     // shouldComponentUpdate
//     return(
        
//         <div>
//                     <Themenutton/>
//         </div>
//     )
// }

class Toolbar extends React.Component{
    shouldComponentUpdate(){
        return false
    }
    render(){
        return(
        
                    <div>
                                <Themenutton/>
                    </div>
                )
    }

}

// 3.使用 contextType接受 再用this.context传值
// class Themenutton extends React.Component{
//     static contextType = TheContext
//     render(){
//         return(
//             // 消费者
//             <div><button theme={this.context}>这里有{this.context}颗白菜</button></div>
//         )
//     }
// }

// xxx.Consumer  可以让函数式组件进行传递
function Themenutton(){
    console.log("Themenutton render")
    return(
        <TheContext.Consumer>
            
            {(value) => (
                <ColorContext.Consumer>
                    {(color_value) => <button>{`${value} ${color_value}`}</button>}
                </ColorContext.Consumer>
            )}
        </TheContext.Consumer>
    )
}
// context 可以无视中间组件进行传值与this.state不一样
export default App

    //   有一点问题